<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="static/js/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="static/css/bootstrap.css">
  <link rel="stylesheet" href="static/css/bootstrap-table.css">
  <script src="static/js/bootstrap.js"></script>
  <script src="static/js/bootstrap-table.js"></script>
  <script src="static/js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column" style="height: 50px;">
    </div>
  </div>
  <div class="row clearfix">
    <div class="col-md-2 column">
    </div>
    <div class="col-md-8 column">
      <table id="my_table" style="width: 100%">
        <tr>
          <td style="width: 20%">
            <img src="http://172.16.31.1:8088/static/img/topic/1.jpg" width="50px;">
            <br>
            <span>E888355</span>
          </td>
          <td style="width: 80%">
            <h3>离开卡戴珊,哈登似乔丹</h3>
            <span>猫吧是一个理性、科学，关注动物福利的平台</span>
          </td>
        </tr>
      </table>
    </div>
    <div class="col-md-2 column">
    </div>
  </div>
</div>
</body>
<script>
  $(function(){
      $("#my_table").bootstrapTable({
          url: "data.json",
          columns: [
              {
                  field: "imgPath",
                  formatter: function(value,row){
                      var user_td = '<td style="width: 20%">\n' +
                          '            <img src="'+value+'" width="50px;">\n' +
                          '            <br>\n' +
                          '            <span>'+row.topUserId+'</span>\n' +
                          '          </td>';
                      return user_td;
                  }
              },
              {
                  field: "topId",
                  formatter: function(value,row){
                      var topic_td = '<td style="width: 80%">\n' +
                          '            <h3>'+row.title+'</h3>\n' +
                          '            <span>'+row.content+'</span>\n' +
                          '          </td>';
                      return topic_td;
                  }
              }
          ]
      });
      $.ajax({
          url: "data.json",
          dataType: "json",
          success: function(data){
            console.log(data);

            for(var i = 0; i < data.rows.length; i++){
                var a =
                    '<a href="2.html?topicId='+data.rows[i].topicId+'"><div style="border: #0f0f0f solid"><h3>'+data.rows[i].title+'</h3><span>'+data.rows[i].content+'</span> <br>'+data.rows[i].createTime+'</div>';
                $(a).appendTo("#content");
            }
          }
      });
  })
</script>
</html>